<script lang="ts" setup>
// 导入系统用户 API 类型定义
import type { AiDutyStatusRecordsApi } from '#/api/moxi/aidutystatusrecords';

// 从 Vue 导入计算属性和响应式引用相关函数
import { ref } from 'vue';

// 导入自定义抽屉组件钩子函数
import { useVbenDrawer } from '@vben/common-ui';

// 导入消息提示组件
// 导入国际化函数
import { $t } from '#/locales';

import descriptions from './descriptions.vue';

// 定义自定义事件，用于通知父组件操作成功
// const emit = defineEmits(['success']);
// 定义响应式引用，用于存储表单数据
const formData = ref<AiDutyStatusRecordsApi.AiDutyStatusRecords>();
// 计算属性，根据是否有表单数据的 id 来动态生成标题

// 使用自定义表单钩子函数创建表单组件和表单 API
// const [Form, formApi] = useVbenForm({
//   commonConfig: {
//     componentProps: {
//       class: 'w-full', // 设置表单项宽度为 100%
//     },
//   },
//   // 表单布局为 2 列
//   wrapperClass: 'grid-cols-2',
//   // 表单布局模式为水平布局
//   layout: 'horizontal',
//   // 获取表单模式配置
//   schema: useFormSchema(),
//   // 不显示默认的操作按钮
//   showDefaultActions: false,
// });

// 使用自定义抽屉钩子函数创建抽屉组件和抽屉 API
const [Drawer, DrawerApi] = useVbenDrawer({
  // 抽屉确认事件处理函数
  async onConfirm() {
    // // 对表单进行验证
    // const { valid } = await formApi.validate();
    // // 若验证不通过，直接返回
    // if (!valid) {
    //   return;
    // }
    // // 锁定抽屉，防止用户重复操作
    // DrawerApi.lock();
    // // 获取表单数据
    // const data = (await formApi.getValues()) as AiDutyStatusRecordsApi.AiDutyStatusRecords;
    // try {
    //   // 根据是否有 id 决定是更新用户还是创建用户
    //   await (formData.value?.id ? updateUser(data) : createUser(data));
    //   // 关闭抽屉
    //   await DrawerApi.close();
    //   // 触发自定义事件通知父组件操作成功
    //   emit('success');
    //   // 显示操作成功的消息提示
    //   message.success($t('ui.actionMessage.operationSuccess'));
    // } finally {
    //   // 解锁抽屉
    //   DrawerApi.unlock();
    // }
  },
  // 抽屉打开状态变化事件处理函数
  async onOpenChange(isOpen: boolean) {
    // 若抽屉关闭，清空表单数据
    if (!isOpen) {
      formData.value = undefined;
      return;
    }
    // 获取抽屉传递的数据
    const data =
      DrawerApi.getData<AiDutyStatusRecordsApi.AiDutyStatusRecords>();
    // 若没有数据或没有 id，直接返回
    if (!data || !data.id) {
      return;
    }
    // 锁定抽屉，防止用户重复操作
    DrawerApi.lock();
    try {
      formData.value = data;
    } finally {
      // 解锁抽屉
      DrawerApi.unlock();
    }
  },
});
</script>

<template>
  <!-- 渲染抽屉组件，设置标题和宽度 -->
  <Drawer :title="$t('ui.visitor.browDepartureRecordser')" class="w-1/2">
    <!-- 渲染表单组件，设置左右外边距 -->
    <descriptions :form-data="formData" />
  </Drawer>
</template>
